<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">


  <!-- 检索表单 -->
  <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()">
    <nz-row nzGutter="8">
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            关键字
          </nz-form-label>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input [(ngModel)]="keyword" (keyup.enter)="refresh()" name="keyword" [placeholder]="'搜索...'">
              <ng-template #suffixButton>
                <button nz-button nzType="primary" nzSearch type="submit">
                  <i class="anticon anticon-search"></i>
                </button>
              </ng-template>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            父级
          </nz-form-label>
          <nz-form-control>
            <cloumn-parent-combo [isFindRoot]="'false'" placeholder="请选择父级" [(selectedCloumn)]="selectedCloumn"
              (selectedCloumnChange)="refresh()"></cloumn-parent-combo>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            创建日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="CreateDateRange" [(ngModel)]="createStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="6"></nz-col>
      <nz-col nzSm="6">
        <nz-form-item>
          <nz-form-label>
            修改日期范围
          </nz-form-label>
          <nz-form-control>
            <nz-range-picker name="UpdateDateRange" [(ngModel)]="updateStartToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
              (ngModelChange)="dateRangeChange()"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>

    <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            是否启用
          </nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="isEnable" name="isEnable" [nzPlaceHolder]="'请选择启用状态'" nzAllowClear (ngModelChange)="isEnableChange()">
              <nz-option [nzLabel]="'全部'" nzValue=""></nz-option>
              <nz-option [nzLabel]="'是'" nzValue="true"></nz-option>
              <nz-option [nzLabel]="'否'" nzValue="false"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzSm="12">
        <nz-form-item>
          <nz-form-label>
            是否授权
          </nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="isAuthorize" name="isAuthorize" [nzPlaceHolder]="'请选择授权状态'" nzAllowClear
              (ngModelChange)="isisAuthorizeChange()">
              <nz-option [nzLabel]="'全部'" nzValue=""></nz-option>
              <nz-option [nzLabel]="'是'" nzValue="true"></nz-option>
              <nz-option [nzLabel]="'否'" nzValue="false"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </form>

  <!-- 操作部分 -->
  <nz-row nzGutter="8">
    <nz-col nzMd="20" nzSm="12" class="btn-gutter">
    </nz-col>
    <nz-col nzMd="4" nzSm="12" class="text-right">
      <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
        显示高级过滤
        <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
      </a>
    </nz-col>
  </nz-row>

  <nz-table #roleTable [nzFrontPagination]="false" [nzData]="tableHelper.records" [nzTotal]="tableHelper.totalRecordsCount"
    [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" [nzLoading]="tableHelper.isLoading"
    nzNoResult="暂无数据" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
    <thead (nzSortChange)="sort($event)">
      <tr>
        <th nzShowSort nzSortKey="title">标题</th>
        <th nzShowSort nzSortKey="publisher">发布人</th>
        <th>栏目名称</th>
        <th>文章来源</th>
        <th nzShowSort nzSortKey="recommendedType">推荐类型</th>
        <th nzShowSort nzSortKey="isActive">启用</th>
        <th nzShowSort nzSortKey="isNeedAuthorizeAccess">授权</th>
        <th nzShowSort nzSortKey="releaseTime">发布时间</th>
        <th nzWidth="220px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data [ngForOf]="roleTable.data">
        <tr>
          <td>{{data.title}}</td>
          <td>{{data.publisher}}</td>
          <td>{{data.columnInfo}}</td>
          <td>{{data.articleSourceInfo}}</td>
          <td>{{getRecommendedTypeText(data.recommendedType)}}</td>
          <td>
            <nz-switch [ngModel]="data.isActive" nzCheckedChildren="是" nzUnCheckedChildren="否" (ngModelChange)="clickIsActiveSwitch(data)"></nz-switch>
          </td>
          <td>
            <nz-switch [ngModel]="data.isNeedAuthorizeAccess" nzCheckedChildren="是" nzUnCheckedChildren="否"
              (ngModelChange)="clickIsNeedAuthorizeAccessSwitch(data)"></nz-switch>
          </td>
          <td>{{data.releaseTime ? (data.releaseTime | date:'yyyy-MM-dd') : '-'}}</td>
          <td class="table_operate">

            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.ArticleInfo.Edit')">
              <a (click)="editBuildingPlan(data)">
                <i nz-icon [type]="'edit'" theme="fill"></i> 编辑
              </a>
              <nz-divider nzType="vertical"></nz-divider>
            </ng-container>
            <!-- 删除 -->
            <ng-container *ngIf="isGranted('Pages.ArticleInfo.Delete')">
              <nz-popconfirm nzTitle="是否确定删除此项？" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deleteConfirm(data.id)">
                <a nz-popconfirm>
                  <i nz-icon [type]="'delete'" theme="fill"></i>
                  删除
                </a>
              </nz-popconfirm>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'article'" theme="fill"></i> 文章信息
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate" *ngIf="isGranted('Pages.ArticleInfo.Create')">
    <a (click)="createBuildingPlan()">创建</a>
  </div>
</ng-template>